<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lab 2 Main Page</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- Bootstrap Hero 组件示例 -->
    <div class="px-4 py-5 my-5 text-center">
        <h1 class="display-5 fw-bold text-body-emphasis">Lab 2 Bootstrap Demo</h1>
        <div class="col-lg-6 mx-auto">
            <p class="lead mb-4">This is a Hero component from Bootstrap, used for Lab 2 experiment. 
            Developed by zhan shenlong</p>
            <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
                <button type="button" class="btn btn-primary btn-lg px-4 gap-3">Primary Button</button>
                <button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary Button</button>
            </div>
        </div>
    </div>

    <!-- 引入 Bootstrap JS（如需交互功能） -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>